<template>
    <div class="h-header" :class="{'m-h-header':isPhone}">
        <div class="header-wrap">
            <template v-if="isPhone">
                <i class="el-icon-s-unfold" @click="popupVisible=true"></i>
                <mt-popup v-model="popupVisible" position="left" class="m-pupop">
                    <ul class="tabs-center">
                        <li class="item" v-for="(item,index) in tabs" :key="index"
                            :class="{'item-active':item.path==routeName}"
                            @click="choiceTab(item)">
                            {{item.name}}
                        </li>
                    </ul>
                </mt-popup>
            </template>
            <div class="left" @click="choiceTab({path:'/'})">
                <img class="logo" src="../../public/images/logo-ico.png" alt=""/>
                <img class="title" src="../../public/images/logo-title.png" alt="">
            </div>
            <template v-if="!isPhone">
                <div class="center"><img class="title_1" src="../../public/images/title-1.png"/></div>
                <ul class="items">
                    <li class="item item-active">
                        <p class="cn">教育升学</p>
                        <p class="en">EDUCATION</p>
                    </li>
                    <li class="item">
                        <p class="cn">关于我们</p>
                        <p class="en">ABOUT US</p>
                    </li>
                </ul>
            </template>
        </div>
        <div class="tabs" :class="{'tabs-fixed':isFixed,'white-tabs':routeName!='/'}" v-if="!isPhone">
            <div class="tab-wrap">
                <div class="tabs-left" @click="choiceTab({path:'/'})">
                    <template v-if="isFixed||routeName!='/'">
                        <img class="tabs-logo" src="../../public/images/sxb-logo-b-ico.png" alt="">
                        <img class="name" src="../../public/images/sxb-text-b-ico.png" alt="">
                    </template>
                    <template v-else>
                        <img class="tabs-logo" src="../../public/images/sxb-logo-w-ico.png" alt="">
                        <img class="name" src="../../public/images/sxb-text-w-ico.png" alt="">
                    </template>
                </div>
                <ul class="tabs-center">
                    <li class="item" v-for="(item,index) in tabs" :key="index"
                        :class="{'item-active':item.path==routeName}"
                        @click="choiceTab(item)">
                        {{item.name}}
                    </li>
                </ul>
                <span class="tabs-btn" :class="{'white-tabs-btn':tabStyle}">微信登录</span>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState, mapGetters} from 'vuex'
    import Vue from 'vue'
    import {Popup} from 'mint-ui';

    Vue.component(Popup.name, Popup);
    export default {
        data() {
            return {
                isFixed: false,
                tabs: [
                    {name: '首页', id: 1, path: '/'},
                    {name: '升学直通车', id: 2, path: 'rise-edu'},
                    {name: '名师工作室', id: 3, path: 'live-studio'},
                    {name: '社区', id: 4},
                    {name: '招生合作', id: 5},
                    {name: '知识库', id: 6},
                ],
                whiteStyle: false,
                popupVisible: false
            }
        },
        computed: {
            ...mapState(['tabStyle', 'isPhone']),
            ...mapGetters(['routeName'])
        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll)
            console.log(this.routeName)
        },
        methods: {
            handleScroll(e) {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                this.isFixed = Number(scrollTop) >= 100 ? true : false
            },
            choiceTab(item) {
                this.$router.push({name: item.path})
                this.$store.commit(types.SET_TAB_ROUTE, item.path)
                if (this.isPhone) this.popupVisible = false
            }
        }
    }
</script>
<style lang="scss" scoped>
    .h-header {
        position: relative;
        height: 100px;
        width: 100%;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        background: #fff;
        z-index: 999;
        .left {
            cursor: pointer;
            .logo {
                width: 56px;
                height: 56px;
            }
            .title {
                width: 184px;
                height: 27px;
                margin-left: 20px;
            }
        }
        .center {
            flex: 1;
            text-align: center;
            .title_1 {
                width: 254px;
                height: 58px;
            }
        }
        .items {
            display: flex;
            height: 100%;
            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 90px;
                .cn {
                    margin-bottom: 4px;
                    font-size: 16px;
                    color: #646464;
                }
                .en {
                    font-size: 12px;
                    color: #969696;
                    opacity: .7;
                }
            }
            .item-active {
                background: #1E80FF;
                .cn {
                    color: #fff;
                }
                .en {
                    color: #fff;
                    opacity: .3;
                }
            }
        }
    }

    .header-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px;
        height: 100%;
        margin: 0 auto;
        padding: 0 10px;
    }

    .m-h-header {
        height: 70px;
        .header-wrap {
            position: relative;
            justify-content: center;
            .el-icon-s-unfold {
                position: absolute;
                left: 10px;
                font-size: 30px;
            }
            .m-pupop {
                height: 100%;
                width: 50%;
                .tabs-center {
                    padding-left: 40px;
                    .item {
                        height: 100px;
                        line-height: 100px;
                        font-size: 20px;
                    }
                    .item-active {
                        color: #1E80FF !important;
                    }
                }
            }
        }
        .logo {
            width: 30px !important;
            height: 30px !important;
        }
        .title {
            height: 26px !important;
            width: auto !important;
            margin-left: 10px !important;
        }
    }

    .tabs {
        position: absolute;
        bottom: -55px;
        left: 0;
        width: 100%;
        height: 55px;
        background: transparent;
        color: #fff;
        .tab-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            width: 1200px;
            margin: 0 auto;
            .tabs-left {
                display: flex;
                align-items: center;
                cursor: pointer;
                .tabs-logo {
                    width: 34px;
                    height: 34px;
                }
                .name {
                    width: 63px;
                    height: 31px;
                    margin-left: 10px;
                }
            }
            .tabs-center {
                flex: 1;
                display: flex;
                align-items: center;
                padding-left: 85px;
                height: 100%;
                .item {
                    margin-right: 30px;
                    cursor: pointer;

                }
                .item-active {
                    position: relative;
                    &:after {
                        content: '';
                        position: absolute;
                        left: 50%;
                        bottom: -4px;
                        transform: translateX(-50%);
                        width: 50%;
                        height: 2px;
                        background: #fff;
                        border-radius: 2px;
                    }
                }
            }
            .tabs-btn {
                width: 84px;
                line-height: 24px;
                background: #fff;
                border-radius: 12px;
                text-align: center;
                color: #393B45;
            }
            .white-tabs-btn {
                background: #1E80FF;
                color: #fff;

            }
        }
    }

    .white-tabs {
        background: #fff;
        color: #1E80FF;
        .item-active:after {
            background: #1E80FF !important;
        }
    }

    .tabs-fixed {
        position: fixed;
        top: 0;
        background: #fff;
        color: #1E80FF;
        z-index: 1001;
        .tabs-btn {
            background: #1E80FF !important;
            color: #fff !important;
        }
        .item-active:after {
            background: #1E80FF !important;
        }
    }

</style>
